<style>
  .tab-pane .panel-primary {
    border: none;
  }

  .tab-pane .panel-heading {
    border-color: rgba(49, 123, 204, 0);
  }

  .tab-pane .panel-body {
    padding: 15px 15px 5px;
  }

  .panel-body .test-intro {
    height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-body .time {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    font-size: 12px;
  }

  .testpaper-question-choices .choice-opt {
    margin-right: 5px;
  }

  .que-look {
    padding: 10px 0;
  }

  .que-look li, .que-look div, .que-look label {
    color: #919191;
  }

  .footer_input label.radio-inline {
    padding: 8px 20px 8px 30px;
    display: inline-block;
  }

  .footer_input label.radio-inline:hover {
    background-color: #eee;
  }

  .stem-box {
    margin: 0;
    position: relative;
  }

  .stem-box .testpaper-question-stem {
    padding-right: 40px;
  }

  .testpaper-question-choices {
    margin-left: 0;
  }

  .testpaper-question-choices li {
    padding: 10px 12px;
    margin: 4px 0;
  }

  .testpaper-question-choices .active {
    background-color: #eee;
  }

  .testpaper-question-footer {
    padding-left: 0;
  }

  .stem-box .right {
    position: absolute;
    right: 2px;
    top: -1px;
  }

  .stem-box .right span {
    color: #fff !important;
  }

  .label {
    color: #FFFFFF;
  }

  .type-1 {
    padding-left: 10px !important;
  }
</style>
<div id="practice-content">
  <ul class="cd-tabs" style="margin-bottom: 10px;">
    <li class="active"><a href="#tt" data-toggle="tab">随堂练习</a></li>
    <li @click="initPaper"><a href="#test_paper" data-toggle="tab">试卷测试</a></li>
  </ul>
  <hr>
  <div class="tab-content">
    <div class="tab-pane active" id="tt">
      <div v-if="taskPractice.rows.length<=0" class="empty">暂无练习信息</div>
      <div class="panel-group" id="practices" v-if="taskPractice.rows.length>0">
        <practice-item v-for="(pra, index) in taskPractice.rows" :key="index+1"
                       :taskpra="pra" :index="index"></practice-item>
      </div>
    </div>
    <div class="tab-pane" id="test_paper">
      <div v-if="test_paper.rows.length<=0" class="empty">暂无考试</div>
      <test-paper-item v-for="(paper, index) in test_paper.rows" :key="index+1"
                       :paper="paper" :index="index"/>
    </div>
  </div>
</div>
<template id="test-paper-item">
  <div class="panel panel-primary">
    <div class="panel-heading clearfix">
      <div class="pull-left">
        <i class="fa fa-book"> {{paper.name}}</i>
      </div>
      <div class="pull-right">
        <span>参与: {{paper.downs}} </span>
        <span> 完成: {{paper.submits}}</span>
      </div>
    </div>
    <div class="panel-body">
      <div class="clearfix">
        <div class="test-intro pull-left">
          {{paper.intro}}
        </div>
        <div class="pull-right">
          <button @click="down_(paper.path)" style="margin-bottom: 5px;"
                  :class="'btn btn-success btn-sm '+disable_(paper.path)">试卷下载
          </button>
          <br>
          <button @click="down_(paper.result)"
                  :class="'btn btn-warning btn-sm '+disable_(paper.result)">答案下载
          </button>
        </div>
      </div>
      <div class="time">
        <time class="text-success">开始时间: {{paper.time}}</time>
        <time class="text-danger">截止时间: {{paper.endTime}}</time>
      </div>
    </div>
  </div>
</template>
<template id="practice-item">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding: 0;">
      <h4 class="panel-title">
        <a style="height: 38px;line-height: 38px;" class="inline-block width-full clearfix" data-toggle="collapse"
           @click="getAllData" :href="'#collapse-'+index">
          <span class="pull-left" v-if="taskpra.task!=null">练习 {{index+1}} 【{{taskpra.task.name}}】</span>
          <span class="pull-left" v-if="taskpra.task==null">练习 {{index+1}} 【本课程】</span>
          <span class="pull-right">

          </span>
        </a>
      </h4>
    </div>
    <div :id="'collapse-'+index" class="panel-collapse collapse">
      <div class="panel-body">
        <div style="width: 100px; height: 40px; margin: 0 auto;" v-show="loading" class="infinite-loading"></div>
        <div v-show="!loading">
          <p-item v-for="(practice, ind) in practices" :key="practice.id"
                  :practice="practice" :index="ind"></p-item>
        </div>
      </div>
    </div>
    <!--show.bs.collapse-->
  </div>
</template>
<template id="p-item">
  <div class="que-look">
    <div class="testpaper-question-choice">
      <div class="testpaper-question-body">
        <div class="stem-box clearfix">
          <!--题干-->
          <div class="testpaper-question-stem">
            <div>
              <span style="color: black; font-weight: bolder;">({{index+1}})</span>
              <span v-if="practice.type==0" class="label label-info">单选题</span>
              <span v-if="practice.type==1" class="label label-success">多选题</span>
              {{practice.stem}}
            </div>
          </div>
          <div class="right" v-html="difs(practice.difficulty)"></div>
        </div>
        <!--选项列表-->
        <ul v-if="practice.type<2" class="testpaper-question-choices">
          <li v-for="opt in practice.options">
            <span class="choice-opt">{{getOptLetter(opt.option)}}.</span>
            <span class="choice-content">{{opt.result}}</span>
          </li>
        </ul>
      </div>
      <!--选项选择-->
      <form :id="'form-'+practice.id">
        <div v-if="practice.type<2" class="testpaper-question-footer clearfix">
          <div class="footer_input">
            <label v-for="(opt,i) in practice.options" :class="'radio-inline type-'+practice.type">
              <input v-if="practice.type==0" type="radio" name="single_choice" :value="i">
              <input v-if="practice.type==1" type="checkbox" name="multipart_choice" :value="i">
              {{getOptLetter(i)}}
            </label>
            <span style="padding-top: 12px;" v-if="response.id>0">
              <span v-if="response.right" class="fa fa-check-square text-success"></span>
              <span v-else-if="!response.right" class="fa fa-window-close text-danger"></span>
            </span>
          </div>
        </div>
      </form>
      <transition name="fade">
        <div style="padding-top: 5px;" v-show="showAna && response.id>0">
          <pre>{{practice.analysis==null?'暂无解析':practice.analysis}}</pre>
        </div>
      </transition>
      <div class="clearfix">
        <div v-if="response.id>0" class="pull-left">
          <label style="margin: 0;height: 30px;line-height: 30px;">正确答案：
            <strong class="color-success">{{practice.option|optionFilter}}</strong>
          </label>
        </div>
        <div class="pull-right">
          <button v-if="response.id>0 || doAw" class="btn btn-success btn-sm" @click="showAnalysis">查看解析</button>
          <button v-else-if="response.id<=0" class="btn btn-info btn-sm" @click="submitAn">提交答案</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  var preVm = new Vue({
    el: '#practice-content',
    data: {
      test_paper: {
        rows: [],
        pageNum: 1,
        totalPages: 1,
        limit: 10
      },
      taskPractice: {
        rows: [],
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    components: {
      'test-paper-item': {
        props: ['paper', 'index'],
        template: '#test-paper-item',
        methods: {
          disable_: function (path) {
            if (path == null || path === '') return 'disabled';
          },
          down_: function (path) {
            var self = this;
            var t = "答案";
            if (path != null && path !== '') {
              if (path.indexOf("t=1") !== -1) {
                t = "试卷";
                $.post('/course/join_paper/${kid}/join/' + this.paper.id, {tea: this.paper.userId}, function (data) {
                  if (data.success) self.paper.downs++;
                });
              }
              window.open(path + "&name=" + this.paper.name + "(" + t + ")", "_top");
            }
          }
        }
      },
      'practice-item': {
        props: ['taskpra', 'index'],
        data: function () {
          return {
            loading: true,
            practices: []
          }
        },
        template: '#practice-item',
        components: { ///////////////////////
          'p-item': {
            props: ['practice', 'index'],
            data: function () {
              return {
                response: {id: 0},
                showAna: false,
                doAw: false // 做过题目后就可以看答案
              }
            },
            template: '#p-item',
            filters: {
              optionFilter: function (val) {
                if (val.indexOf(',') !== -1) {
                  var sps = val.split(',');
                  var opt = '';
                  for (var i = 0; i < sps.length; i++) {
                    if (sps[i].trim() !== '') {
                      opt += (this.getOptLetter(parseInt(sps[i])) + " ");
                    }
                  }
                  return opt;
                } else return this.getOptLetter(parseInt(val));
              }
            },
            methods: {
              getOptLetter: function (index) {
                var number = "A".charCodeAt();
                return String.fromCharCode(number + index);
              },
              difs: function (v) {
                if (v === 0) return '<span class="label label-info">简单</span>';
                if (v === 1) return '<span class="label label-warning">普通</span>';
                if (v === 2) return '<span class="label label-danger">困难</span>';
              },
              showAnalysis: function () {
                this.showAna = !this.showAna;
              },
              submitAn: function () {
                var array = $('#form-' + this.practice.id).serializeArray();
                if (array.length > 0) {
                  var option = '';
                  if (this.practice.type === 0) {
                    option = array[0].value;
                  } else {
                    for (var i = 0; i < array.length; i++) {
                      option += (array[i].value + ",");
                    }
                  }
                  this.response = $.extend({}, this.response, {practiceId: this.practice.id, option: option, right: 0});
                  if (this.practice.option === option) this.response.right = 1;
                  this.postSubmit();
                }
              },
              postSubmit: function () {
                var self = this;
                $.post('/course/pres/api/submit', self.response, function (data) {
                  if (data.success) {
                    self.response = data.payload;
                  }
                });
              }
            },
            mounted: function(){
              var self = this;
              $.post('/course/pres/api/get/' + self.practice.id, function (data) { // 获取用户作答信息 并选中用户选项 同时禁用选项
                if (data.success) {
                  self.response = data.payload;
                  var opts = self.response.option.split(',');
                  var ins = $('#form-' + self.practice.id).find('input');
                  for (var i = 0; i < opts.length; i++) {
                    var opt = opts[i];
                    var inp = ins.eq(opt);
                    if (opt.trim() !== '') {
                      checked_(inp, opt, true, self.practice.type);
                      inp.click();
                    }
                  }
                  ins.attr('disabled', '').parent('label').addClass('disabled');
                }
              });
            }
          }
        },
        methods: {
          getAllData: function () {
            var self = this;
            if (self.practices.length <= 0) {
              $.post("/course/practice/api/${kid}/pageTask/" + this.taskpra.taskId, {size: 10000}, function (data) {
                if (data.success) {
                  self.practices = data.payload.rows;
                  window.setTimeout(function () {
                    self.loading = false;
                    $('.testpaper-question-footer input').on('click', function () {
                      var type = this.type;
                      var checked = this.checked;
                      var val = this.value;
                      checked_($(this), val, checked, type);
                    });
                  }, 1000);
                }
              });
            }
          }
        }
      }
    },
    methods: {
      getPapers: function () {
        var self = this;
        $.post('/course/paper/api/${kid}/page', {page: self.test_paper.pageNum}, function (data) {
          if (data.success) {
            self.test_paper.rows = data.payload.rows;
            self.test_paper.limit = data.payload.limit;
            self.test_paper.pageNum = data.payload.pageNum;
            self.test_paper.totalPages = data.payload.totalPages;
          }
        });
      },
      initPaper: function () {
        if (this.test_paper.rows.length <= 0) {
          this.getPapers();
        }
      },
      getGroupTask: function () {
        var self = this;
        $.post('/course/practice/api/${kid}/groupTask', {page: self.taskPractice.pageNum}, function (data) {
          if (data.success) {
            self.taskPractice.rows = data.payload.rows;
            self.taskPractice.limit = data.payload.limit;
            self.taskPractice.pageNum = data.payload.pageNum;
            self.taskPractice.totalPages = data.payload.totalPages;
          }
        });
      }
    },
    created: function () {
      this.getGroupTask();
    }
  });

  function checked_(elem, index, checked, type) {
    var $lis = elem.parents('.testpaper-question-choice').find('.testpaper-question-choices li');
    if (type === 'radio') {
      $lis.removeClass('active').eq(index).addClass('active');
    } else {
      if (checked) {
        $lis.eq(index).addClass('active');
      } else {
        $lis.eq(index).removeClass('active');
      }
    }
  }
</script>
